<template>
	<el-dialog
		v-if="visible"
		width="1000px"
		:visible="visible"
		:close-on-click-modal="true"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
		center
	>
		<div slot="title">
			购买详情
		</div>
		<el-card v-loading="loading" element-loading-spinner="el-icon-loading">
			<div class="insure-buy-content">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-row class="content-margin">
							<el-col :span="8">
								<div class="show-img-title">
									手牌
								</div>
								<div class="show-img-content">
									<div
										class="show-img"
										v-for="(img,
										index) in detail.handCardsImg"
										:key="index + Math.random()"
									>
										<el-image
											:src="img"
											fit="contain"
										></el-image>
									</div>
								</div>
							</el-col>
							<el-col :span="16">
								<div class="show-img-title">
									公共牌
								</div>
								<div class="show-img-content">
									<div
										class="show-img"
										v-for="(img,
										index) in detail.publicCardsImg"
										:key="index + Math.random()"
									>
										<el-image
											:src="img"
											fit="contain"
										></el-image>
									</div>
									<div
										class="show-img"
										v-for="(img,
										index) in detail.nextPublicCardsImg"
										:key="index + Math.random()"
									>
										<div
											v-if="
												!detail.isEVInsurance &&
													detail.outsType === 1 &&
													detail.insuredRewards
											"
											class="cardFireStyle"
										>
											<el-image
												:src="cardFireImg"
												fit="contain"
											></el-image>
										</div>
										<div class="cardCoverStyle"></div>
										<el-image
											:src="img"
											fit="contain"
										></el-image>
									</div>
								</div>
							</el-col>
						</el-row>
						<el-row style="margin-top:25px;">
							<el-col :span="8">
								<span>底池</span>
								<span>{{ detail.potAmount }}</span>
							</el-col>
							<el-col :span="8">
								<span>玩家投注</span>
								<span>{{ detail.betAmount }}</span>
							</el-col>
							<el-col :span="8" v-if="!detail.isEVInsurance">
								<span>最大投保</span>
								<span>{{ detail.maxInsuredAmount }}</span>
							</el-col>
						</el-row>
						<el-row class="show-other-hand-content content-margin">
							<div
								v-for="(item, indexs) in detail.noBuyInsureUser"
								:key="indexs + Math.random()"
								class="show-other-hand-item"
							>
								<div>
									<div class="show-img-title5">
										{{ item.userName }}
									</div>
									<div class="show-img-content">
										<div
											class="show-img"
											v-for="(img,
											index) in item.handCardsImg"
											:key="index + Math.random()"
										>
											<el-image
												:src="img"
												fit="contain"
											></el-image>
										</div>
									</div>
								</div>
							</div>
						</el-row>
						<el-row
							v-if="!detail.isEVInsurance"
							class="content-margin"
						>
							<div class="show-count-content">
								<span class="outs-type">
									{{ detail.outsTypeName }}
									<br />
									保险
								</span>
								<span>
									<span>{{ detail.insuredAmount }}</span>
									<span>投保额</span>
								</span>
								<span class="sign-label">X</span>
								<span>
									<span>{{ detail.odds }}</span>
									<span>赔率</span>
								</span>
								<span class="sign-label">=</span>
								<span>
									<span>
										{{ detail.insuredRewardsAllocation }}
									</span>
									<span>奖励分配</span>
								</span>
								<span
									v-if="detail.insuredRewards"
									class="insure-result-yes"
								>
									已中保
								</span>
								<span v-else style="width: 50px;"></span>
							</div>
						</el-row>
					</el-col>
					<el-col :span="12" class="content-margin">
						<template v-if="!detail.isEVInsurance">
							<div class="show-img-title">
								{{ detail.allOutsLen }}
								{{ detail.outsTypeName }}
							</div>
							<div class="show-lead-out-width show-img-content">
								<div
									class="show-img"
									v-for="item in detail.allOutsImg"
									:key="item.num + Math.random()"
								>
									<div
										v-if="item.isBuy"
										class="show-img-sign"
									>
										已买
									</div>
									<el-image
										:src="item.img"
										fit="contain"
									></el-image>
								</div>
							</div>
						</template>
						<div v-else style="margin-top: 25%;">
							<div style="margin-bottom: 10px;">
								<span
									v-if="detail.insuredRewards"
									class="insure-result-yes"
								>
									已提取
								</span>
								<span v-else class="insure-result-no">
									未提取
								</span>
							</div>
							<div class="show-count-content">
								<span class="ev-type">
									EV:
								</span>
								<span>
									<span>{{ detail.potAmount }}</span>
									<span>底池</span>
								</span>
								<span class="sign-label">X</span>
								<span>
									<span>{{ detail.potWinRate }}</span>
									<span>胜率</span>
								</span>
								<span class="sign-label">X</span>
								<span>
									<span>{{ detail.insuranceDiscount }}</span>
									<span>EV折扣</span>
								</span>
								<span class="sign-label">=</span>
								<span>
									<span>
										{{ detail.evExtractionVal }}
									</span>
									<span>EV值</span>
								</span>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<div class="show-close-button content-margin">
						<el-button type="primary" @click.native="handleClose">
							关闭
						</el-button>
					</div>
				</el-row>
			</div>
		</el-card>
	</el-dialog>
</template>

<script>
export default {
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		loading: {
			type: Boolean,
			default: false
		},
		detail: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	data() {
		return {
			cardFireImg: require('@/assets/images/game/insureFire.png')
		}
	},
	methods: {
		// 关闭弹窗
		handleClose() {
			this.$emit('update:visible', false)
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__header {
	background-color: #333333;
	color: #ffffff !important;
	font-weight: 700;
	padding: 10px 20px 10px;
}
::v-deep .el-dialog__headerbtn {
	font-size: 24px;
	top: 5px;
	right: 10px;
}
::v-deep .el-dialog__close {
	color: #ffffff;
}
.insure-buy-content {
	font-size: 14px;
	.content-margin {
		margin-bottom: 15px;
	}
	::v-deep .el-tag {
		background-color: #e6f5fc !important;
		width: 100%;
		height: auto;
		line-height: 18px;
		text-align: center;
		margin-right: 5px;
		span:nth-child(1) {
			display: block;
			color: gray;
		}
		span:nth-child(2) {
			color: black;
		}
	}
	.show-betting-content {
		display: flex;
		justify-content: space-between;
	}
	.show-other-hand-content {
		display: flex;
		flex-wrap: wrap;
		margin-top: 30px;
		// justify-content: space-between;
		.show-other-hand-item {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			margin-right: 50px;
			margin-bottom: 10px;
		}
	}
	.show-img-title5 {
		margin-bottom: 5px;
	}
	.show-img-title {
		margin-bottom: 10px;
	}
	.show-img-content {
		display: flex;
		flex-flow: wrap;
		.show-img {
			width: 35px;
			height: 50px;
			margin-right: 5px;
			margin-bottom: 5px;
			position: relative;
			img {
				width: 100%;
				height: auto;
				display: block;
			}
			.cardFireStyle {
				z-index: 3;
				position: absolute;
				right: 2px;
				top: 1px;
				width: 12px;
				height: 12px;
				opacity: 1;
			}
			.cardCoverStyle {
				z-index: 2;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: white;
				opacity: 0.6;
				border-radius: 4px;
			}
		}
		.show-img-sign {
			z-index: 2;
			position: absolute;
			left: 8px;
			top: 0;
			width: 75%;
			height: 11px;
			border-radius: 5px;
			text-align: center;
			opacity: 1;
			margin-top: -4px;
			font-size: 9px;
			font-weight: bold;
			color: #5cacd1;
			background-color: #bde3f3;
		}
	}
	.show-lead-out-width {
		width: 270px;
	}
	.show-count-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.number-label {
			color: blue;
			display: block;
			padding-bottom: 5px;
		}
		.sign-label {
			color: red;
			font-size: 20px;
		}
		.outs-type {
			font-size: 16px;
			font-weight: 600;
			color: #333333;
		}
		.ev-type {
			font-size: 20px;
			font-weight: 900;
			color: #333333;
		}
		span {
			display: block;
			text-align: center;
			span:nth-child(1) {
				color: #1890ff;
				font-size: 20px;
				margin-bottom: 5px;
			}
			span:nth-child(2) {
				color: #808080;
				font-size: 18px;
			}
		}
	}
	.insure-result-yes {
		text-align: center;
		padding: 5px;
		background-color: #d9001b;
		color: #ffff00;
		font-weight: 600;
	}
	.insure-result-no {
		text-align: center;
		padding: 5px;
		background-color: #7f7f7f;
		color: #ffff00;
		font-weight: 600;
	}
	.show-close-button {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 15px;
	}
}
</style>
